<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <link href="css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <h2 style="padding-left:60px;">Total Funding Rounds in CrunchBase by Quarter</h2>
    <script src="lib/d3.js"></script>
    <script src="lib/jquery.js"></script>
    <script src="lib/bootstrap.js"></script>
    <script>
      var margin = {top: 20, right: 55, bottom: 30, left: 40},
          width  = 500 - margin.left - margin.right,
          height = 1000 - margin.top  - margin.bottom;

      var x = d3.scale.linear()
          .rangeRound([0,width]);

      var y = d3.scale.ordinal()
          .rangeRoundBands([0, height], .1);

      var color = d3.scale.ordinal()
          .range(["#001c9c","#101b4d","#475003","#9c8305","#d3c47c"]);

      var svg = d3.select("body").append("svg")
          .attr("width",  width  + margin.left + margin.right)
          .attr("height", height + margin.top  + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      d3.csv("data/crunchbase-quarters.csv", function (error, data) {
        var labelVar = 'quarter'; //A
        var varNames = d3.keys(data[0])
            .filter(function (key) { return key !== labelVar;}); //B

        color.domain(varNames); //C

        data.forEach(function (d) { //D
          var x0 = 0;
          d.mapping = varNames.map(function (name) { 
            return {
              name: name,
              label: d[labelVar],
              x0: x0,
              x1: x0 += +d[name],
              val: d[name]
            };
          });
          d.mapping.forEach(function(d){               
              d.x0 /= x0; 
              d.x1 /= x0; 
            });
          d.total = d.mapping[d.mapping.length - 1].x1;
        });

        console.log("prepped data", data);

        y.domain(data.map(function (d) { return d.quarter; })); //E
        x.domain([0, d3.max(data, function (d) { return d.total; })]);

        var selection = svg.selectAll(".series")
            .data(data)
          .enter().append("g")
            .attr("class", "series")
            .attr("transform", function (d) { return "translate(0," + y(d.quarter) + ")"; });

        selection.selectAll("rect")
          .data(function (d) { return d.mapping; })
        .enter().append("rect")
          .attr("height", y.rangeBand())
          .attr("x", function (d) { return x(d.x0); })
          .attr("width", function (d) { return x(d.x1) - x(d.x0); })
          .style("fill", function (d) { return color(d.name); })
          .style("stroke", "grey")
          .on("mouseover", function (d) { showPopover.call(this, d); })
          .on("mouseout",  function (d) { removePopovers(); });

        selection.selectAll("text")
          .data(function (d) { return d.mapping; })
          .enter().append("text")
          .text(function(d){
            return d.val;
          })
          .attr("x", function (d) { return x(d.x0) + (x(d.x1) - x(d.x0))/2; })
          .attr("text-anchor", "middle")
          .attr("alignment-baseline", "middle")
          .attr("transform", function (d, i) { return "translate(0,"+(y.rangeBand()/2)+")"; })
          .attr("font-family", "sans-serif")
          .attr("font-size", "15px")
          .attr("fill", "white")
          .style("display", function(d) {
              return this.getBBox().width < (x(d.x1) - x(d.x0)) ? null : "none";
          })
          .on("mouseover", function (d) { showPopover.call(this, d); })
          .on("mouseout",  function (d) { removePopovers(); });

        function removePopovers () {
          $('.popover').each(function() {
            $(this).remove();
          }); 
        }

        function showPopover (d) {
          $(this).popover({
            title: d.name,
            placement: 'auto top',
            container: 'body',
            trigger: 'manual',
            html : true,
            content: function() { 
              return "Quarter: " + d.label + 
                     "<br/>Rounds: " + d3.format(",")(d.value ? d.value: d.val); }
          });
          $(this).popover('show')
        }

      });
    </script>
  </body>
</html>